<!-- 登录页面 -->
<template>
	<view class="t-login">
		<view class="container">
			<view class="login-content">
			<view class="top-setting">
				<view class="top-right">
					<!-- 语言 -->
					<view class="lang">
						<i class="t-icon t-icon-yuyan"></i>
						<view class="lang-box">
							<u-picker :show="show" :columns="columns" @cancel="cancel" @confirm="confirm" keyName="text" :cancelText="$t('common.cancel')"
								:confirmText="$t('common.complete')"></u-picker>
							<view class="langtext" @click="show=true">
								<text>{{ value }}</text>
								<!-- <i class="t-icon t-icon-sanjiaoxing"></i> -->
							</view>
						</view>
					</view>
					<view class="config" @click.stop="$u.route('/pages/login/config/index')">
						<i class="t-icon t-icon-shezhi"></i>
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="t-b">
				<image src="../../static/img/jackLogin.png"></image>
			</view>
			<form class="cl">
				<!-- 租户名称 -->
				<view class="login-form-item">
					<i class="t-icon t-icon-yonghuming"></i>
					<u-input v-model="tenantName" :placeholder="$t('login.placeholderTenant')" maxlength="30">
					</u-input>
				</view>
				<!-- 登录账号 -->
				<view class="login-form-item">
					<i class="t-icon t-icon-yonghuming"></i>
					<u-input v-model="username" :placeholder="$t('login.placeholderUser')" maxlength="30">
					</u-input>
				</view>
				<!-- 登录密码 -->
				<view class="login-form-item">
					<i class="t-icon t-icon-mima"></i>
					<u-input v-model="password" type="password" :placeholder="$t('login.placeholderPwd')" maxlength="16">
					</u-input>
				</view>
				<view class="isRememberPWD">
					<u-checkbox-group v-model="isRememberPWD" placement="column">
						<u-checkbox ref="checkBox" iconColor="#3E8FF7" :label="$t('login.isRememberPWD')" :name="$t('login.isRememberPWD')">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<u-button type="primary" :text="$t('login.SignIn')" @click="login"></u-button>
				<!-- <u-button type="primary" text="清缓存" @click="clearStorage"></u-button> -->
			</form>
		</view>
		</view>
	</view>
</template>
<script>
	import { isEmpty } from '@/utils/verify.js'
	import storage from '@/utils/storage'
	export default {
		data() {
			return {
				title: '您好，',
				subTitle: '欢迎登录物联网2.0',
				// 租户名称
				tenantName: storage.get('_isSaveLoginInfo').tenantName || '',
				// 登录账号
				username: storage.get('_isSaveLoginInfo').username || '',
				// 密码
				password: storage.get('_isSaveLoginInfo').password || '',
				uuid: '',
				show: false,
				columns: [
					[
						{
							text: this.$t('locale.zh-hans'),
							code: 'zh-Hans'
						},
						{
							text: this.$t('locale.en'),
							code: 'en'
						},
					]
				],
				value: "",
				systemLocale: "",
				applicationLocale: "",
				isRememberPWD: []
			};
		},
		onLoad() {
			storage.remove('currentSewLineInfo')
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.language;
			this.applicationLocale = uni.getLocale();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			})
			this.columns[0].forEach(item => {
				if (item.code === this.applicationLocale) {
					storage.set('language', item.text)
					this.value = item.text
					return 
				} 
			})
		},
		created() {},
		mounted() {
			if (storage.get('_isSaveLoginInfo').password) this.$refs.checkBox.isChecked = true

			const envConfig = storage.get('environment')
			if (!envConfig) {
				storage.set('environment', { ip: '192.168.0.207', port: '9095', type: 'http' })
			}
		},
		methods: {
			// 选择语言
			onLocaleChange(e) {
				if (this.isAndroid) {
					uni.showModal({
						content: this.$t('index.language-change-confirm'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(e.code);
							}
						}
					})
				} else {
					uni.setLocale(e.code);
					this.$i18n.locale = e.code;
				}

				let getSystemInfo = this.$store.getters.getSystemInfo
				getSystemInfo.language = e.code
				this.$initMoment()
				this.$store.commit('SET_SYSTEM_INFO', getSystemInfo)
			},
			// 关闭语言选择框
			cancel(e) {
				this.show = false
			},
			// 确定语言选择框
			confirm(e) {
				this.value = e.value[0].text
				storage.set('language', e.value[0].text)
				this.show = false
				this.onLocaleChange(e.value[0])
			},
			// 验证表单内容
			validItem() {
				const app = this
				if (isEmpty(app.tenantName)) {
					// uni.$u.toast(this.$t('login.placeholderTenant'))
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('login.placeholderTenant')}</p>`,{
						type: "richtext",
						duration: "long",
						verticalAlign: "middle"
					}
					);
					return false
				}
				if (isEmpty(app.username)) {
					// uni.$u.toast(this.$t('login.placeholderUser'))
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('login.placeholderUser')}</p>`,{
						type: "richtext",
						duration: "long",
						verticalAlign: "middle"
					}
					);
					return false
				}
				if (isEmpty(app.password)) {
					// uni.$u.toast(this.$t('login.placeholderPwd'))
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('login.placeholderPwd')}</p>`,{
						type: "richtext",
						duration: "long",
						verticalAlign: "middle"
					}
					);
					return false
				}
				return true
			},
			// 确认登录
			login() {
				const app = this
				let valid = app.validItem();
				
				if (valid) {
					app.isLoading = true
				
					app.$store.dispatch('Login', {
							tenantName: app.tenantName,
							username: app.username,
							password: app.password,
							uuid: app.getUuid(24, 16),
							captcha: ''
							// grant_type: 'password'
						}).then(result => {
							app.$store.dispatch('Info').then(resp => {
								// console.log("🚀 ~ file: index.vue:183 ~ app.$store.dispatch ~ resp:", resp)
								storage.set('_isSaveLoginInfo', {
									username: app.username,
									password: this.$refs.checkBox.isChecked ? app.password : '',
									password: app.password,
									tenantName: app.tenantName
								});
								uni.navigateTo({
									url: '/pages/index/index'
								})
							})
						})
						.catch(err => {
							console.log(err, 'err');
							// uni.$u.toast(err?.msg || this.$t('config.checkConfig'))
						})
						.finally(() => app.isLoading = false)
				}
			},
			// clearStorage() {
			// 	uni.clearStorageSync()
			// }
		}
	};
</script>
<style lang="scss" scoped>
	@import 'index.scss';
</style>
